<template>
  <div id="parent">
    <div class="head">
      <h2>首页</h2>
    </div>
    <div class="welcome">
      <div class="headImg">
          <el-avatar :size="80" :src="circleUrl"></el-avatar>
      </div>
      <div class="text">
          <h3>您好，尊敬的{{online.adminName}}，祝您健康每一天！</h3>
          <font style="color: darkgrey">{{ online.roleInfo.roleName }} | {{ online.departmentInfo.departmentName }}</font>
      </div>
      <div class="info">
        <font style="color: darkgrey">累计注册(人)</font>
        <h2>888</h2>
      </div>
      <div class="info2" style="border-right: black 1px solid">
        <font style="color: darkgrey">本月新增用户(人)</font>
        <h2>233</h2>
      </div>
      <div style="clear: both"></div>
    </div>
    <div class="moneyInfo">
      <div class="order1">
        <h5>系统所有商品数(个)</h5>
        <i class="el-icon-date" style="font-size: 45px;color: #409EFF"></i>
        <font size="6">{{ goodsNum }}</font>
      </div>
      <div class="order2">
        <h5>本月体检订单(笔)</h5>
        <i class="el-icon-school" style="font-size: 45px;color: #409EFF"></i>
        <font size="6">2222</font>
      </div>
      <div class="order3">
        <h5>本月问诊订单(笔)</h5>
        <i class="el-icon-first-aid-kit" style="font-size: 45px;color: #409EFF"></i>
        <font size="6">2222</font>
      </div>
      <div class="order4">
        <h5>本月累计销售(元)</h5>
        <i class="el-icon-money" style="font-size: 45px;color: #409EFF"></i>
        <font size="6">{{ money }}</font>
      </div>
      <div style="clear: both"></div>
    </div>
    <div class="fast">
      <br>
      <div style="margin-left: 30px;"><h3>快捷入口</h3>
        <table style="width: 100%;text-align: center;font-size: 35px">
          <tr>
            <td><el-link type="primary" icon="el-icon-edit" style="font-size: 20px">添加医院</el-link></td>
            <td><el-link type="primary" icon="el-icon-edit" style="font-size: 20px">运动分析</el-link></td>
            <td><el-link type="primary" icon="el-icon-edit" style="font-size: 20px">挂号订单</el-link></td>
            <td><el-link type="primary" icon="el-icon-edit" style="font-size: 20px">问诊订单</el-link></td>
          </tr>
          <tr>
            <td><el-link type="primary" icon="el-icon-edit" style="font-size: 20px">商场订单</el-link></td>
            <td><el-link type="primary" icon="el-icon-edit" style="font-size: 20px">咨询管理</el-link></td>
            <td><el-link type="primary" icon="el-icon-edit" style="font-size: 20px">用户详情</el-link></td>
            <td><el-link type="primary" icon="el-icon-edit" style="font-size: 20px">封禁管理</el-link></td>
          </tr>
        </table>
      </div>

    </div>
  </div>
</template>

<script>
    export default {
        created() {
         // this.online =  localStorage.getItem("admin")
         let obj = localStorage.getItem("admin")
          this.online = JSON.parse(obj)
          this.circleUrl = this.online.img;
        },
      mounted() {
        if(this.online.id == 1 || this.online.id == 2){
          this.WebSocketConnect()
        }
        this.axios.get("micro-sys-server/feign/get").then(res => {
          let num = res.data.data.length;
          this.goodsNum = num;
        })
        this.axios.get("micro-sys-server/feign/getMoney").then(res => {
          let money = res.data.data;
          this.money = money;
        })
      },
      destroyed() {
        if(this.socket != null){
          this.socket.close
        }
      },

      name: "Home",
        data(){
          return {
            circleUrl: '',
            online:{},
            socket:null,
            goodsNum: 0,
            money: 0
          }
        },
      methods: {
        /* 初始化websochet */
        WebSocketConnect() {
          //此处要特别注意一下，
          //如你的Spring Boot 项目设置了项目名称
          //则需要在webServer前面加起项目名称，否则会出现socket连接404状态
          //如没配置项目名，则不用理会
          let socket = new WebSocket('ws:localhost:9090/endpointWisely');
          this.socket = socket;
          let stompClient = Stomp.over(socket);
          let notify = this.$notify;
          stompClient.connect({}, function (frame) {
            stompClient.subscribe('/topic/getLogin', function (response) {
              notify({
                title: '提醒',
                message: response.body,
                type: 'success'
              });
            });
          });
        }
      }

    }
</script>

<style scoped>
#parent{
  background-color: #F0F2F5;
  height: 600px;
}
.head{
  background-color: white;
  height: 50px;
}
.welcome{
  width: 96%;
  /*margin: auto;*/
  background-color: white;
  margin-top: 20px;
  margin-left: 2%;
  padding-top: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .12), 0 0 12px rgba(0, 0, 0, .04)
}
.headImg{
  padding-top: 15px;
  padding-left: 20px;
  box-sizing: border-box;
  /*border: 1px solid black;*/
  width: 140px;
  float: left;
}
.text{
  float: left;
  margin-left: 20px;
}
.info,.info2{
  width: 180px;
  float: right;
  padding-top: 20px;
  margin-left: 30px;
  box-sizing: border-box;
}
.moneyInfo{
  margin-top: 5px;
  /*height: 180px;*/
}
.order1,.order2,.order3,.order4{
  width: 22%;
  float: left;
  margin-top: 20px;
  margin-left: 26px;
  background-color: white;
  height: 150px;
  padding-left: 25px;
  box-sizing: border-box;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .12), 0 0 12px rgba(0, 0, 0, .04)
}
.fast{
  margin-top: 25px;
  height: 180px;
  background-color: white;
  width: 96%;
  margin-left: 2%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .12), 0 0 12px rgba(0, 0, 0, .04)
}
</style>
